<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>弹幕系统 - Spring Boot</title>
    <style>
        #danmaku-container {
            width: 800px;
            height: 500px;
            background: #000;
            position: relative;
            overflow: hidden;
        }
        .danmaku {
            position: absolute;
            white-space: nowrap;
            color: #fff;
            font-size: 16px;
            text-shadow: 1px 1px 2px #000;
            will-change: transform;
        }
    </style>
</head>
<body>
<h1>弹幕系统</h1>
<div>
    <label>房间ID: <input id="roomId" value="room1"></label>
    <button id="connect">连接</button>
    <button id="disconnect" disabled>断开</button>
</div>

<div id="danmaku-container"></div>

<div>
    <input id="message" placeholder="输入弹幕内容">
    <button id="send">发送</button>
    <div>
        <label>颜色: <input type="color" id="color" value="#ffffff"></label>
        <label>大小:
            <select id="size">
                <option value="16">小</option>
                <option value="24" selected>中</option>
                <option value="32">大</option>
            </select>
        </label>
    </div>
</div>

<script src="danmaku.js"></script>
</body>
</html>